<template>
	<view>
		<uni-nav-bar @clickLeft="goBack" statusBar left-icon="back" left-text="返回" title="导航栏组件" right-text="更多">
			<view class="input-view">
				<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
				<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" />
			</view>
		</uni-nav-bar>
		<view class="page-body">
			<view>
				音频标签
			</view>
			<view class="page-section page-section-gap" style="text-align: center;">
				<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name"
					:author="current.author" :action="audioAction" controls></audio>
			</view>
		</view>
		<view>
			相机
			<button type="primary" @click="showOrHideCamera">{{isShowCamera?'关闭':'打开'}}</button>
			<view v-if="isShowCamera">
				<camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
				<button type="primary" @click="takePhoto">拍照</button>
				<view>预览(点击图片放大预览)</view>
				<image mode="widthFix" @click="doPriview" :src="src"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShowCamera: false,
				src: "",
				current: {
					poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png',
					name: '致爱丽丝',
					author: '暂无',
					src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
				},
				audioAction: {
					method: 'pause'
				}
			}
		},
		methods: {
			//预览
			doPriview() {
				uni.previewImage({
					urls: [this.src]//临时路径可以预览，可以预览多个
				})
			},
			goBack() {
				uni.showToast({
					title: "返回上一也"
				})
			},
			showOrHideCamera() {
				this.isShowCamera = !this.isShowCamera
			},
			takePhoto() {
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						console.log(res)
						this.src = res.tempImagePath
					}
				});
			},
			error(e) {
				console.log(e.detail);
			}
		}
	}
</script>

<style>
	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// width: 500rpx;
		flex: 1;
		background-color: #f8f8f8;
		height: $nav-height;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: $nav-height;
	}
</style>